<template>
    <div class="baseinfo-list-of-units">
        <div v-show="!detailView">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
                <el-form-item>
                    <el-input v-model="searchForm.name" placeholder="请输入单位" @keyup.enter.native="getTable(1)" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select filterable @change="getTable(1)" v-model="searchForm.fireType" placeholder="请选择场所性质">
                        <el-option label="全部场所性质" value=""></el-option>
                        <el-option v-for="item in placeOptions" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button class="form-search-btn" type="primary" @click="getTable(1)">查询</el-button>
                </el-form-item>
            </el-form>
            <el-row class="overview-wrap" :gutter="40">
              <el-col :span="8">
                <div class="item-wrap">
                  <p class="item-value color-3">{{ statistics.orgNum }}</p>
                  <p class="item-title">单位总数（个）</p>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="item-wrap">
                  <p class="item-value color-1">{{ statistics.highRiskFireNum }}</p>
                  <p class="item-title">火灾高危单位（个）</p>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="item-wrap">
                  <p class="item-value color-3">{{ statistics.fireSafetyFocusNum + statistics.highRiskFireNum }}</p>
                  <p class="item-title">消防安全重点单位（个）</p>
                </div>
              </el-col>
              <!-- <el-col :span="8">
                <div class="item-wrap">
                  <p class="item-value color-4">{{ statistics.generalNum }}</p>
                  <p class="item-title">一般单位（个）</p>
                </div>
              </el-col> -->
            </el-row>
            <el-table
                v-loading="loading"
                :data="tableData"
                ref="mainTable"
                style="width: 100%">
                <el-table-column
                    label="序号"
                    type="index"
                    width="50">
                </el-table-column>
                <el-table-column label="业主单位" prop="shortName"></el-table-column>
                <el-table-column label="场所性质" prop="fireTypeName"></el-table-column>
                <el-table-column label="安全管理人">
                    <template slot-scope="scope">
                        <template v-for="item in scope.row.contacts">
                            <p v-if="item.role == 10" :key="item.id">{{item.name}}</p>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="安全责任人">
                    <template slot-scope="scope">
                        <template v-for="item in scope.row.contacts">
                            <p v-if="item.role == 9" :key="item.id">{{item.name}}</p>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="单位联系电话" prop="tel"></el-table-column>
                <el-table-column label="行业" prop="industryName"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="handleDetail(scope.row)" type="text" size="small">清单</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 50, 100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        
        <transition name="el-zoom-in-top">
            <!-- 单个单位详细基本信息 -->
            <unit-base-info-form-view v-if="detailView" :organizationId="orgId" :hasFather="hasFather" :returnFun="returnFather"></unit-base-info-form-view>
        </transition>
    </div>
</template>

<script>
import { getDictByCode } from '@/api/dic'
import { getBaseUcttuList, countUcttuByFiretype } from '@/api/org'
import unitBaseInfoFormView from './UnitBaseInfoFormView'

export default {
    name: 'BaseInfoList',
    components: {
        unitBaseInfoFormView
    },
    data() {
        return {
            loading: false,
            detailView: false,
            hasFather: true,
            searchForm: {
                name: '',
                fireType: ''
            },
            placeOptions: [],
            // 统计信息
            statistics: {
                orgNum: 0,
                highRiskFireNum: 0,
                fireSafetyFocusNum: 0,
                generalNum: 0
            },
            tableData: [],
            total: 0,
            currentPage: 1,
            pageSize: 10,
            orgId: ''
        }
    },
    created() {
        // 获取场所性质下拉数据
        getDictByCode({code: 74}).then(res => {
            this.placeOptions = res.data.dictValueObj
        })

        this.getTable()
    },
    methods: {
        // 获取统计信息
        getStatistics () {
            let that = this
            let parames = {
                name: that.searchForm.name.trim(),
                fireType: that.searchForm.fireType,
            }
            countUcttuByFiretype(parames).then(res => {
                if (res.status === 200) {
                    let dataList = res.data
                    for (var i=0, len=dataList.length; i < len; i++) {
                        if(dataList[i].fireType === 2) {
                            that.statistics.highRiskFireNum = dataList[i].totalNum || 0
                        } else if (dataList[i].fireType === 1) {
                            that.statistics.fireSafetyFocusNum = dataList[i].totalNum || 0
                        } else if (dataList[i].fireType === 3) {
                            that.statistics.generalNum = dataList[i].totalNum || 0
                        }
                    }
                }
            })
        },
        getTable(_pageIndex, _pageSize) {
            if(_pageIndex){
                this.currentPage = _pageIndex
            }
            if(_pageSize){
                this.pageSize = _pageSize
            }
            let that = this
            let parames = {
                name: that.searchForm.name.trim(),
                fireType: that.searchForm.fireType,
                queryType: 1,
                pageIndex: that.currentPage - 1,
                pageSize: that.pageSize
            }
            that.loading = true
            getBaseUcttuList(parames).then(res => {
                that.tableData = res.data
                that.total = res.total
                that.statistics.orgNum = res.total
                that.loading = false
            })
            that.getStatistics()
        },
        handleSizeChange(pageSize) {
            this.getTable(1, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.getTable(currentPage)
        },
        // 点击清单
        handleDetail(row) {
            if(row) {
                this.orgId = row.organizationId
                this.detailView = true
            }
        },
        // 返回父页面（供子组件调用）
        returnFather() {
            this.detailView = false
            this.getTable()
        }
    }
}
</script>